<template>
  <BaseCard title="系统配置" class="h-full pb-3">
    <div class="common-content">
      <div class="common-content_title">
        <span>打包服务开关</span>
        <el-switch
          :model-value="formState.pack_service_switch"
          inline-prompt
          active-text="开"
          inactive-text="关"
          :active-value="1"
          :inactive-value="2"
          @change="handleCommand('status', formState)"
        />
      </div>
      <div class="mt-2 common-content_tip">
        打包服务关闭后，节点发起的打包申请将被忽略；
      </div>
    </div>
    <div class="common-content">
      <div class="common-content_title">
        <span>上报地址</span>
      </div>
      <div class="mt-2 common-content_tip">
        节点上报数据的地址域名，用于生成脚本；
      </div>
      <el-input
        v-model="formState.report_url"
        maxlength="30"
        class="w-[332px] mt-2"
        clearable
        placeholder="请输入http://或https://上报地址"
      />
      <div>
        <el-button type="primary" @click="handleCommand('generate', formState)"
          >生成脚本</el-button
        >
      </div>
    </div>
    <div class="common-content">
      <div class="common-content_title">
        <span>脚本命令</span>
      </div>
      <div class="mt-2 common-content_tip">
        节点上执行该脚本，用于安装TCC程序；
      </div>
      <el-input
        v-model="formState.node_script_command"
        maxlength="30"
        type="textarea"
        autosize
        class="w-[332px] mt-2"
        clearable
        placeholder="请先生成脚本"
      />
      <div>
        <el-button type="primary" @click="handleCommand('copy', formState)"
          >复制脚本</el-button
        >
      </div>
    </div>
  </BaseCard>
</template>
<script lang="ts" setup>
import type { UpdateConfig } from '@/apis/model/system'
import BaseCard from '@/components/base-card'
import { get, isFunction } from 'lodash-es'
import useClipboard from 'vue-clipboard3'
import { ElMessageBox, ElNotification } from 'element-plus'
const { toClipboard } = useClipboard()
const formState = reactive<UpdateConfig>({
  pack_service_switch: 1,
  report_url: '',
  node_script_command: ''
})

const getSystemConfig = () => {
  system_list().then(res => {
    Object.assign(formState, res)
  })
}
//更新服务开关状态
const updateStatus = record => {
  const msg =
    record?.pack_service_switch === 1
      ? '确认关闭服务开关？'
      : '确认打开服务开关？'
  ElMessageBox.confirm(msg, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    customClass: 'basic-message-box'
  })
    .then(() => {
      update_config({
        pack_service_switch: record?.pack_service_switch === 1 ? 2 : 1
      })
        .then(() => {
          ElNotification.success({
            title: '成功',
            message: record?.pack_service_switch === 1 ? '关闭成功' : '打开成功'
          })
          getSystemConfig()
        })
        .finally(() => {})
    })
    .catch(() => {
      // 取消按钮
      // getTableList()
    })
}
//生成脚本
const generateJs = record => {
  update_config({
    report_url: record?.report_url
  })
    .then(res => {
      formState.node_script_command = res.node_script_command
      ElNotification.success({
        title: '成功',
        message: '生成脚本成功'
      })
      getSystemConfig()
    })
    .finally(() => {})
}
type ICommand = 'status' | 'generate' | 'copy'
const handleCommand = (command: ICommand, record: UpdateConfig) => {
  const actions: Record<ICommand, () => void> = {
    status: (): void => {
      updateStatus(record)
    },
    generate: (): void => {
      generateJs(record)
    },
    copy: (): void => {
      toClipboard(record.node_script_command)
      ElNotification.success({
        title: '成功',
        message: '复制成功'
      })
    }
  }
  if (isFunction(get(actions, command))) {
    actions[command]()
  }
}
onMounted(() => {
  getSystemConfig()
})
</script>

<style lang="scss" scoped>
.common-content {
  @apply text-[12px] mb-8 flex flex-col;
  &_title {
    @apply flex items-center;
    span {
      @apply text-[#333] font-semibold relative;
      &::before {
        @apply absolute left-[-7px] top-0 bottom-0;
        content: '';
        width: 3px;
        height: 14px;
        border-radius: 1.5px;
        background-color: #1562fc;
        margin: auto;
      }
    }
    .el-switch {
      @apply ml-4;
    }
  }
  &_tip {
    @apply text-[#666];
  }
  .el-button {
    @apply mt-[15px];
  }
}
</style>
